
<template>
  <main class="container"> 
    <div class="menus">
		<router-link to="/home"><div class="menu-icon"><icon /> </div></router-link>
		<router-link to="/wallpaper"><div class="menu-icon"><desktop /> </div></router-link>
		<router-link to="/pointer"><div class="menu-icon"><cursor /> </div></router-link>
    </div>
    <router-view class="flex1"></router-view>
  </main> 
</template>
<script>
import icon from './icons/icon.vue'
import desktop from './icons/desktop.vue'
import cursor from './icons/cursor.vue'
export default {
  components:{icon,desktop,cursor},
  
  data() {
    return {
       
    }
  },
} 
</script>

<style scoped>
.container{
  display: flex;
  width: 100vw; 
}
.menus{
   display:inline-flex;
   flex-direction: column;
   height: 100vh;
   background-color: aliceblue;
   background-color: #2a2a2a;
}

.menu-icon{
   margin: 5px;
   padding: 10px;
   border-radius: 5px;
}
.menu-icon:hover{
	background: #3e3e3e;
} 
</style>